<template>
  <div class="space-y-6">
    <div class="card">
      <div class="p-6">
        <h3 class="font-semibold text-lg mb-4">绑定新域名</h3>
        <form class="space-y-4 max-w-md">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">选择站点 <span class="text-danger">*</span></label>
            <select class="form-input" v-model="newDomain.siteId">
              <option value="">请选择站点</option>
              <option v-for="site in sites" :key="site.id" :value="site.id">{{ site.name }}</option>
            </select>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">域名 <span class="text-danger">*</span></label>
            <input type="text" class="form-input" v-model="newDomain.domain" placeholder="例如：www.example.com">
            <p class="text-xs text-gray-500 mt-1">请确保域名已完成备案并解析到本服务器IP</p>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">域名类型</label>
            <select class="form-input" v-model="newDomain.type">
              <option value="primary">主域名</option>
              <option value="secondary">备用域名</option>
            </select>
          </div>
          
          <button type="button" class="btn btn-primary" @click="bindDomain" :disabled="!newDomain.siteId || !newDomain.domain">
            <i class="fa fa-link"></i>
            <span>绑定域名</span>
          </button>
        </form>
      </div>
    </div>
    
    <div class="card">
      <div class="p-6 border-b border-gray-100">
        <h3 class="font-semibold text-lg">已绑定域名列表</h3>
      </div>
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead>
            <tr class="bg-gray-50">
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">站点名称</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">域名</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">SSL状态</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">绑定时间</th>
              <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="domain in domains" :key="domain.id" class="hover:bg-gray-50 transition-colors">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900">{{ domain.siteName }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">{{ domain.domain }}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="badge" :class="domain.type === 'primary' ? 'bg-primary/10 text-primary' : 'bg-gray-100 text-gray-600'">
                  {{ domain.type === 'primary' ? '主域名' : '备用域名' }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="badge" :class="domain.ssl ? 'bg-success/10 text-success' : 'bg-warning/10 text-warning'">
                  {{ domain.ssl ? '已启用' : '未启用' }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ domain.bindTime }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <div class="flex justify-end gap-2">
                  <button class="text-primary hover:text-primary/80" title="SSL设置" v-if="!domain.ssl" @click="enableSsl(domain.id)">
                    <i class="fa fa-lock"></i>
                  </button>
                  <button class="text-danger hover:text-danger/80" title="解除绑定" @click="unbindDomain(domain.id)">
                    <i class="fa fa-unlink"></i>
                  </button>
                </div>
              </td>
            </tr>
            <tr v-if="domains.length === 0">
              <td colspan="6" class="px-6 py-10 text-center text-gray-500">
                暂无已绑定的域名，请先绑定域名
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

// 站点列表
const sites = ref([
  { id: 1, name: '时尚服装商城' },
  { id: 2, name: '科技有限公司官网' },
  { id: 3, name: '教育培训平台' }
])

// 已绑定域名
const domains = ref([
  { id: 1, siteId: 1, siteName: '时尚服装商城', domain: 'www.fashion-shop.com', type: 'primary', ssl: true, bindTime: '2023-05-15' },
  { id: 2, siteId: 2, siteName: '科技有限公司官网', domain: 'www.techcorp.com', type: 'primary', ssl: true, bindTime: '2023-04-30' },
  { id: 3, siteId: 2, siteName: '科技有限公司官网', domain: 'www.techcorp.net', type: 'secondary', ssl: false, bindTime: '2023-05-02' }
])

// 新绑定域名表单
const newDomain = reactive({
  siteId: '',
  domain: '',
  type: 'primary'
})

// 绑定域名
const bindDomain = () => {
  const site = sites.value.find(s => s.id == newDomain.siteId)
  if (!site) return
  
  // 检查域名是否已绑定
  const exists = domains.value.some(d => d.domain.toLowerCase() === newDomain.domain.toLowerCase())
  if (exists) {
    alert('该域名已被绑定，请更换其他域名')
    return
  }
  
  // 添加新域名
  domains.value.push({
    id: domains.value.length + 1,
    siteId: newDomain.siteId,
    siteName: site.name,
    domain: newDomain.domain,
    type: newDomain.type,
    ssl: false,
    bindTime: new Date().toISOString().split('T')[0]
  })
  
  // 重置表单
  newDomain.siteId = ''
  newDomain.domain = ''
  newDomain.type = 'primary'
  
  alert('域名绑定成功，请确保已完成域名解析')
}

// 启用SSL
const enableSsl = (id) => {
  const domain = domains.value.find(d => d.id === id)
  if (domain) {
    domain.ssl = true
    alert(`已为 ${domain.domain} 启用SSL证书，网站将使用HTTPS加密访问`)
  }
}

// 解除绑定
const unbindDomain = (id) => {
  if (confirm('确定要解除该域名的绑定吗？')) {
    const index = domains.value.findIndex(d => d.id === id)
    if (index !== -1) {
      domains.value.splice(index, 1)
    }
  }
}
</script>

<style scoped>
</style>
